<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" th:href="@{/adminlte/layui/css/layui.css}"  media="all"/>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<!--<div class="layui-btn-group demoTable">
    <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
    <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
    <button class="layui-btn" data-type="isAll">验证是否全选</button>
</div>-->
<!--<h3 style="margin-top: -10px; margin-left:-10px;">检测入库</h3>-->
<div class="demoTable">
    所在地区：
    <div class="layui-inline" style="width: 220px">
        <select name="localSearch1" lay-verify=""  style="width: 200px" onchange="supplierNameSearch()">
            <option value="" >请选择所在地区</option>
        </select>
    </div>
    <div class="layui-inline" style="margin-left: -15px">供应商名称：</div>
    <div class="layui-inline" style="width: 220px;">
        <select name="supplierNameSearch1" lay-verify=""  style="width: 200px" onchange="goodsType()">
            <option value="" >请选择供应商名称</option>
        </select>
    </div>
    物料类别：
    <div class="layui-inline" style="width: 220px">
        <select name="goodsTypeSearch1" lay-verify=""  style="width: 200px" onchange="goodsName()">
            <option value="" >请选择物料类别</option>
        </select>
    </div>
    物料名称：
    <div class="layui-inline" style="width: 220px">
        <select name="goodsNameSearch1" lay-verify=""  style="width: 200px" onchange="specifications()">
            <option value="" >请选择物料名称</option>
        </select>
    </div><br/>
    物料规格：
    <div class="layui-inline" style="width: 220px">
        <select name="specificationsSearch1" lay-verify=""  style="width: 200px" >
            <option value="" >请选择物料规格</option>
        </select>
    </div>
    起始日期：
    <div class="layui-inline" style="width: 220px">
        <input class="layui-input"  id="startDateSearch" autocomplete="off" style="width: 200px;height: 25px" placeholder="请选择起始日期"/>
    </div>
    截止日期：
    <div class="layui-inline" style="width: 220px">
        <input class="layui-input"  id="endDateSearch" autocomplete="off" style="width: 200px;height: 25px" placeholder="请选择截止日期"/>
    </div>
    <button class="layui-btn layui-btn-sm" data-type="reload">查询</button>
</div>
<div id="sao-Ma-ChuKu" style="display: none;">
    <div class="my-form">
        <div class="layui-form-item my-form-item"  >
            <div class="layui-inline">
                <label class="layui-form-label layui-icon"  style="width: 170px">供应商:</label>
                <div class="layui-input-inline">
                    <input id="supplierNameSaoMa" type="text" readonly="readonly"  autocomplete="off" class="layui-input"/>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label layui-icon"  style="width: 170px">物料类别:</label>
                <div class="layui-input-inline">
                    <input id="goodsTypeSaoMa" type="text"   readonly="readonly" autocomplete="off" class="layui-input"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item my-form-item" >
        <div class="layui-inline">
            <label class="layui-form-label layui-icon"  style="width: 170px">物料名称:</label>
            <div class="layui-input-inline">
                <input id="goodsNameSaoMa" type="text"  readonly="readonly"  autocomplete="off" class="layui-input"/>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label layui-icon"  style="width: 170px">物料规格:</label>
            <div class="layui-input-inline">
                <input id="specificationsSaoMa" type="text" readonly="readonly"  autocomplete="off" class="layui-input"/>
            </div>
        </div>
    </div>
        <div class="layui-form-item my-form-item" >
            <div class="layui-inline">
                <label class="layui-form-label layui-icon"  style="width: 170px">出库类别:</label>
                <div class="layui-input-inline">
                    <select id="outStockTypeSaoMa" lay-verify=""  style="width: 190px;height: 25px;" >
                        <option value="" >请选择出库类别</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label layui-icon"  style="width: 170px">备注:</label>
                <div class="layui-input-inline">
                    <input id="remarksSaoMa" type="text"  autocomplete="off" class="layui-input"/>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="toolbarOutStock">
    <input id="saoMaChuKu" class="layui-input" placeholder="请输入物料流水号"  style="width: 200px; height: 25px;float: left" />
    <div class="layui-btn-container" style="display: inline-block;">
        <button class="layui-btn layui-btn-sm" lay-event="outSearch">扫码出库</button>
        <button class="layui-btn layui-btn-sm" lay-event="out" >出库</button>
    </div>
</script>
<table class="layui-table" lay-data="{totalRow:true,url:'/goodsOut/goodsOutData', page:true, id:'idTestOutStock',toolbar:'#toolbarOutStock',defaultToolbar:['filter', 'print','exports'] }" lay-filter="demoOutStock">
    <thead>
    <tr>
        <th lay-data="{field:'goodsType', width:150}">物料类别</th>
        <th lay-data="{field:'goodsName', width:150}">物料名称</th>
        <th lay-data="{field:'specifications', width:150}">物料规格</th>
       <!-- <th lay-data="{field:'goodsProduceDate', width:150}">生产日期</th>-->
        <th lay-data="{field:'status', width:150}">产品状态</th>
        <th lay-data="{field:'outStockType', width:150 ,totalRowText:'合计：'}">出库分类</th>
        <th lay-data="{field:'nums', width:150,totalRow:true}">出库数量</th>
    <!--    <th lay-data="{field:'outGoodsNums', width:150,totalRow:true}">出库后数量</th>
        <th lay-data="{field:'pipelineNumber', width:150}">物料流水号</th>-->
        <th lay-data="{field:'supplierName', width:150}">供应商名称</th>
        <th lay-data="{field:'operator', width:150}">操作人</th>
        <th lay-data="{field:'operatorTime', width:180}">操作时间</th>
        <th lay-data="{field:'remarks', width:500}">备注</th>
    </tr>
    </thead>
</table>

<script th:src="@{/adminlte/layui/layui.js}" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use('table', function(){
        var table = layui.table;
        //监听表格复选框选择
        table.on('checkbox(demoOutStock)', function(obj){
            console.log(obj)
        });
        //监听头工具栏事件
        table.on('toolbar(demoOutStock)', function(obj){
            switch(obj.event){
                case 'out':
                    layer.open({
                        title:'出库',
                        type: 2,
                        content:'/goodsOut/goodsOutFrom',
                        area: ['1300px', '700px'],
                        end: function(){
                            table.reload('idTest');
                        }
                        }
                    );
                    break;
                case 'add':
                    layer.open({

                        }
                    );
                    break;
                case 'outSearch':
                    console.log($("#saoMaChuKu").val());
                    var pipelineNumber= $("#saoMaChuKu").val();
                    $.ajax({
                        //几个参数需要注意一下
                        type: "POST",//方法类型
                        dataType: "json",//预期服务器返回的数据类型
                        url: "/goodsOut/saoMaChuKu" ,//url
                        data:{pipelineNumber:pipelineNumber},
                        success: function (result) {
                            if (result.success>0) {
                                layer.open({
                                    type:1,
                                    title:'确认信息',
                                    btnAlign: 'c',
                                    area: ['500px', '450px'],
                                    content: $("#sao-Ma-ChuKu"),
                                    btn:['保存','取消'],
                                    success: function (layero, index) {
                                        top.$('#supplierNameSaoMa').val(result.supplierName);
                                        top.$('#goodsTypeSaoMa').val(result.goodsType);
                                        top.$('#goodsNameSaoMa').val(result.goodsName);
                                        top.$('#specificationsSaoMa').val(result.specifications);
                                    },
                                    yes:function(index,layero){
                                        var supplierName= top.$('#supplierNameSaoMa').val();
                                        var goodsType= top.$('#goodsTypeSaoMa').val();
                                        var goodsName=top.$('#goodsNameSaoMa').val();
                                        var specifications=top.$('#specificationsSaoMa').val();
                                        var outStockType=top.$('#outStockTypeSaoMa').val();
                                        var remarks=top.$('#remarksSaoMa').val();
                                        $.ajax({
                                            //几个参数需要注意一下
                                            type: "POST",//方法类型
                                            dataType: "json",//预期服务器返回的数据类型
                                            url: "/goodsOut/confirmOut" ,//url
                                            data: {supplierName:supplierName,goodsType:goodsType,goodsName:goodsName,specifications:specifications
                                            ,outStockType:outStockType,remarks:remarks,pipelineNumber:pipelineNumber,local:result.local},
                                            success: function (re) {

                                                if (re.sc >0) {
                                                    layer.msg('出库成功', {
                                                        btnAlign: 'c',
                                                        time: 3000, //20s后自动关闭
                                                        btn: ['确定']
                                                    });
                                                }else{
                                                    layer.msg('出库失败', {
                                                        btnAlign: 'c',
                                                        time: 3000, //20s后自动关闭
                                                        btn: ['确定']
                                                    });
                                                }
                                            },
                                            error : function() {
                                                alert("异常！");
                                            }
                                        });
                                        layer.close(index);
                                    },
                                    btn2:function (index) {
                                        layer.close(index);
                                    }
                                })
                            }else{
                                layer.msg('未找到该物料信息', {
                                    btnAlign: 'c',
                                    time: 3000, //20s后自动关闭
                                    btn: ['确定']
                                });
                            }
                        }
                    });
                    break;
            }
        });
        var $ = layui.$, active = {
            /*     getCheckData: function(){ //获取选中数据
                     var checkStatus = table.checkStatus('idTest')
                         ,data = checkStatus.data;
                     layer.alert(JSON.stringify(data));
                 }
                 ,getCheckLength: function(){ //获取选中数目
                     var checkStatus = table.checkStatus('idTest')
                         ,data = checkStatus.data;
                     layer.msg('选中了：'+ data.length + ' 个');
                 }
                 ,isAll: function(){ //验证是否全选
                     var checkStatus = table.checkStatus('idTest');
                     layer.msg(checkStatus.isAll ? '全选': '未全选')
                 }
                 ,*/
            reload:function () {
                var local = $("[name='localSearch1'] option:selected").text();
                var supplierName = $("[name='supplierNameSearch1'] option:selected").text();
                var goodsType = $("[name='goodsTypeSearch1'] option:selected").text();
                var goodsName = $("[name='goodsNameSearch1'] option:selected").text();
                var specifications = $("[name='specificationsSearch1'] option:selected").text();
                var startDate = $("#startDateSearch").val();
                var endDate = $("#endDateSearch").val();
                table.reload('idTestOutStock',{
                    url:'/goodsOut/searchGoodsOutStock',
                    where:{local:local,supplierName:supplierName,goodsType:goodsType,goodsName:goodsName,specifications:specifications,startDate:startDate,endDate:endDate}  ,
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                })

            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        laydate.render({
            elem: '#startDateSearch' //指定元素
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#endDateSearch' //指定元素
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#produceDateAdd' //指定元素
            ,type: 'datetime'
        });
    });
    $(
        function () {
            loadSelect(); outTyp();
        }
    );

    function outTyp() {
        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/queryLocal" ,//url
            data:{pid:207},
            success: function (result) {
                if (result.success>0) {
                    var list =result.date;
                    /*		$("[name='outStockType']").empty();
                        /!*	var op="";
                            var bp="请选择出库类别";
                            $("[name='outStockType']").append("<option value="+op+">"+bp+"</option>");*!/*/
                    $.each(list,function (i,val) {
                        $("#outStockTypeSaoMa").append("<option value="+val+">"+val+"</option>");
                    });
                }else{
                    alert("信息错误");
                }
            }
        });
    }
    function loadSelect() {
        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/querySupplierLocal" ,//url
            success: function (result) {
                if (result.success>0) {
                    var list =result.date;
                    $("[name='localSearch1']").empty();
                    var op="";
                    var bp="请选择所在地区";
                    $("[name='localSearch1']").append("<option value="+op+">"+bp+"</option>");
                    $.each(list,function (i,val) {
                        $("[name='localSearch1']").append("<option value="+val+">"+val+"</option>");
                        $("#localAdd").append("<option value="+val+">"+val+"</option>");
                    });
                }else{
                 /*   alert("地址信息错误");*/
                }
            }/*,
            error : function() {
                alert("异常！");
            }*/
        });
    }
    function supplierNameSearch() {
        var local = $("[name='localSearch1'] option:selected").text();
        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/querySupplierName" ,//url
            data:{local:local},
            success: function (result) {
                if (result.success>0) {
                    $("[name='supplierNameSearch1']").empty();
                    var op="";
                    var bp="请选择供应商名称";
                    $("[name='supplierNameSearch1']").append("<option value="+op+">"+bp+"</option>");
                    var list =result.date;
                    $.each(list,function (i,val) {
                        $("[name='supplierNameSearch1']").append("<option value="+val+">"+val+"</option>");
                    });
                }else{
                 /*   alert("供应商信息错误");*/
                }
            }/*,
            error : function() {
                alert("异常！");
            }*/
        });

    }
    function goodsType() {
        var factory = $("[name='supplierNameSearch1'] option:selected").text();
        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/sysMaterialManagement/querygoodsType" ,//url
            data:{factory:factory},
            success: function (result) {
                if (result.success>0) {
                    $("[name='goodsTypeSearch1']").empty();
                    var op="";
                    var bp="请选择物料类别";
                    $("[name='goodsTypeSearch1']").append("<option value="+op+">"+bp+"</option>");
                    var list =result.date;
                    $.each(list,function (i,val) {
                        var a =val.id;
                        var b =val.materialtype;
                        $("[name='goodsTypeSearch1']").append("<option value="+a+">"+b+"</option>");
                    });
                }else{
                  /*  alert("类别信息错误");*/
                }
            }/*,
            error : function() {
                alert("异常！");
            }*/
        });
    }
    function goodsName() {
        var pid=$("[name='goodsTypeSearch1']").val();
        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/sysMaterialManagement/queryByPid" ,//url
            data:{pid:pid},
            success: function (result) {
                if (result.success>0) {
                    $("[name='goodsNameSearch1']").empty();
                    var op="";
                    var bp="请选择物料名称";
                    $("[name='goodsNameSearch1']").append("<option value="+op+">"+bp+"</option>");
                    var list =result.date;
                    $.each(list,function (i,val) {
                        var a =val.id;
                        var b =val.materialName
                        $("[name='goodsNameSearch1']").append("<option value="+a+">"+b+"</option>");
                    });
                }else{
                 /*   alert("名称信息错误");*/
                }
            }/*,
            error : function() {
                alert("异常！");
            }*/
        });
    }
    function specifications() {
        var pid = $("[name='goodsNameSearch1']").val();
        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/sysMaterialManagement/queryByPid" ,//url
            data:{pid:pid},
            success: function (result) {
                if (result.success>0) {
                    $("[name='specificationsSearch1']").empty();
                    var op="";
                    var bp="请选择物料规格";
                    $("[name='specificationsSearch1']").append("<option value="+op+">"+bp+"</option>");
                    var list =result.date;
                    $.each(list,function (i,val) {
                        console.log(i+'```````'+val);
                        var a =val.id;
                        var b =val.materialSpecification;
                        $("[name='specificationsSearch1']").append("<option value="+a+">"+b+"</option>");
                    });
                }else{
                    /*alert("规格信息错误");*/
                }
            }/*,
            error : function() {
                alert("异常！");
            }*/
        });
    }
    var unSelected = "#999";
    var selected = "#333";
    $(function () {
        $("select").css("color", unSelected);
        $("option").css("color", selected);
        $("select").change(function () {
            var selItem = $(this).val();
            if (selItem == $(this).find('option:first').val()) {
                $(this).css("color", unSelected);
            } else {
                $(this).css("color", selected);
            }
        });
    })
</script>

</body>
</html>